<script>
import Props from './props'
import AmountInput from '@/components/amountInput/index'
import { deepClone } from '@/utils/index'
export default {
  components: {
    AmountInput
  },
  props: Props,
  data() {
    return {
      isFetchingEmployees: false,
      // form:{
      //     /**
      //      * employeeID 员工ID
      //      * reason 奖惩原因
      //      * amount 奖惩金额
      //      * type 奖励1 惩罚2
      //      * isMonth 是否当月发放 1发放 0不发放
      //      */
      //     employeeID:null,
      //     reason:'',
      //     amount:0,
      //     type:null,
      //     isMonth:null
      // }
      formRules: {
        employeeID: [
          { required: true, type: 'number', message: '请选择员工', trigger: ['change', 'blur'] }
        ],
        type: [
          { required: true, type: 'number', message: '请选择类型', trigger: ['change', 'blur'] }
        ],
        publishing_mode: [
          { required: true, type: 'number', message: '请选择是否公开', trigger: ['change', 'blur'] }
        ],
        public_type: [
          { required: true, type: 'string', message: '请选择公开类别', trigger: ['change', 'blur'] }
        ],
        amount: [
          { required: true, type: 'number', message: '请输入金额', trigger: ['change', 'blur'] }
        ],
        isMonth: [
          { required: true, type: 'number', message: '请选择执行时间', trigger: ['change', 'blur'] }
        ],
        reason: [
          { required: true, message: '请填写原因', trigger: ['change', 'blur'] }
        ]

      }
    }
  },
  computed: {
    form: {
      get() {
        return this.value
      },
      set(form) {
        this.$emit('input', form)
      }
    }
  },
  watch: {
    form: {
      handler(v) {
        console.log(v)
      },
      deep: true
    }
  },
  methods: {
    fetchEmployeeOptions(kw) {
      console.log(typeof this.fetchEmployeeOptionsFn)
      if (typeof this.fetchEmployeeOptionsFn !== 'function') { return }

      this.isFetchingEmployees = true

      this.fetchEmployeeOptionsFn(kw)
        .then(() => this.isFetchingEmployees = false)
        .catch(() => this.isFetchingEmployees = false)
    },
    resetFields() {
            this.$refs.form?.resetFields?.()
    },
    validate(callback) {
            this.$refs.form?.validate(callback)
    }
  }
}
</script>

<template>
  <div class="reward-punishment-form">
    <el-form
      ref="form"
      v-loading="loading"
      :model="form"
      :disabled="disabled"
      :rules="formRules"
      label-width="140px"
      label-position="right"
    >
      <el-form-item label="员工:" prop="employeeID">
        <el-select
          v-model="form.employeeID"
          filterable
          clearable
          remote
          style="width: 100%;"
          placeholder="请选择员工"
          :remote-method="fetchEmployeeOptions"
          :loading="isFetchingEmployees"
        >
          <el-option
            v-for="employee in employeeOptions"
            :key="employee.value"
            :label="employee.label"
            :value="employee.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="类型:" prop="type">
        <el-select
          v-model="form.type"
          placeholder="请选择类型"
          clearable
          style="width: 100%;"
        >
          <el-option
            v-for="option in typeOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="金额:" prop="amount">
        <!--        <AmountInput-->
        <!--          v-model="form.amount"-->
        <!--          placeholder="请输入金额"-->
        <!--          type="number"-->
        <!--          :min="1"-->
        <!--        />-->
        <el-input-number
          v-model="form.amount"
          placeholder="请输入金额"
          :min="1"
          :max="99999999"
        />
      </el-form-item>

      <el-form-item label="发布状态:" prop="publishing_mode">
        <div class="reward-punishment-mode">
          <el-select
            v-model="form.publishing_mode"
            placeholder="请选择私密发布或公开发布"
            clearable
            style="width: 100%;"
          >
            <el-option
              v-for="option in modeOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
          <div class="reward-punishment-mode-tip">
            <span v-if="form.publishing_mode===0">(仅选择的用户可见)</span>
          </div>
        </div>
      </el-form-item>

      <el-form-item v-if="form.publishing_mode===1" label="公开类型:" prop="public_type">
        <el-select
          v-model="form.public_type"
          placeholder="请选择类型"
          clearable
          style="width: 100%;"
        >
          <el-option
            v-for="option in publicTypeOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item v-if="form.type === 1" label="随当月发放:" prop="isMonth">
        <el-radio
          v-for="option in executionOptions"
          :key="option.value"
          v-model="form.isMonth"
          :label="option.value"
        >
          <span style="color:#D4D4D4;">{{ option.label }}</span></el-radio>
        <!-- <el-select
                    v-model="form.isMonth"
                    clearable
                    placeholder="请选择类型"
                    style="width: 100%;"
                >
                    <el-option
                        v-for="option in executionOptions"
                        :key="option.value"
                        :label="option.label"
                        :value="option.value"
                    />
                </el-select> -->
      </el-form-item>

      <el-form-item label="原因:" prop="reason">
        <el-input
          v-model="form.reason"
          type="textarea"
          placeholder="请输入原因"
          :autosize="{ minRows: 6, maxRows: 10}"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.reward-punishment-form{
    padding-top: 40px;
    padding: 30px 80px 30px 30px;
    border-top: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
    .reward-punishment-mode{
        position: relative;
        &-tip{
            position: absolute;
            left: 80px;
            top: 0;
            span{
                color: #D4D4D4;
            }
        }
    }
}

::v-deep .el-form-item__label{
    padding-right: 26px;
}
</style>
